<template>
  <view class="useDetails">
    <u-swiper
      :key="imageNum"
      ref="uSwiper"
      :list="allImages"
      :title="true"
      border-radius="0"
      height="450"
      name="fileUrl"
      original
      @click="seeImage"
      @seeOriginal="seeImage($event, 'original')"
    ></u-swiper>
    <u-cell-group>
      <view class="u-cell-group">
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <text class="title">{{$t('印章')}}：</text>
            <u-tag :text="Info.deviceName" mode="dark" />
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <text class="title">{{$t('用章人')}}：</text>
            <text class="title">{{ Info.userName }}</text>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <text class="title">{{$t('日期')}}：</text>
            <text class="title">{{ Info.realTime }}</text>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <text class="title">{{$t('位置')}}：</text>
            <text>{{ Info.location }}</text>
          </view>
        </u-cell-item>
        <u-cell-item
          v-if="Info.camera === true || Info.camera === false"
          :arrow="false"
          class="u-cell-item"
          hover-class="none"
        >
          <view slot="title">
            <text class="title">{{$t('摄像头状态')}}：</text>
            <u-tag
              :text="Info.camera === true ? $t('开启') : $t('关闭')"
              :type="Info.camera === true ? 'success' : 'warning'"
              size="mini"
            />
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <view v-if="Info.modelName">
              <text class="title">{{$t('模式')}}：</text>
              <u-tag :text="Info.modelName" mode="light" type="success" />
            </view>
            <view v-else>
              <!--兼容1.0后台 使用记录类型 0:申请单模式 1:申请单模式(量子) 2:指纹模式 3:指纹模式(量子) -->
              <text class="title">{{$t('模式')}}：</text>
              <u-tag
                :text="$lizhao.computeType.getTypeName(Info.type)"
                mode="light"
                type="success"
              />
            </view>
          </view>
        </u-cell-item>
        <u-cell-item
          v-if="Info.blockchainCode"
          :arrow="false"
          class="u-cell-item"
          hover-class="none"
        >
          <view slot="title">
            <view style="display: flex">
              <text class="title">{{$t('上链凭证')}}：</text>
              <view class="title">{{ Info.blockchainCode }}</view>
              <u-tag
                mode="light"
                :text="$t('复制')"
                type="success"
                @click="copyHash(Info.blockchainCode)"
              />
            </view>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <text class="title">{{$t('当前次数')}}：</text>
            <text class="title">{{ Info.useCount }}</text>
          </view>
        </u-cell-item>
        <u-cell-item v-if="Info.exception" :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title" style="color: red">
            <text class="title">{{$t('异常信息')}}：</text>
            <u-read-more :show-height="200">
              <rich-text :nodes="Info.exception"></rich-text>
            </u-read-more>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" class="u-cell-item" hover-class="none">
          <view slot="title">
            <text class="title">{{$t('备注')}}：</text>
            <text class="title">{{ Info.remark }}</text>
          </view>
        </u-cell-item>
        <view class="image-warp">
          <u-image
            :src="computeError(Info.error)"
            class="item-image"
            height="150rpx"
            width="150rpx"
          ></u-image>
        </view>
      </view>
    </u-cell-group>
    <view class="footer">
      <!-- 2.0type已弃用 -->
      <u-button
        v-if="
          (Info.applicationId === 0 || Info.applicationId === '' || Info.applicationId === null) &&
          Info.type !== 4 &&
          Info.model !== 5
        "
        size="medium"
        style="width: 100px"
        type="primary"
        @click="btnClick(0)"
      >
        {{$t('绑定申请单')}}
      </u-button>
      <u-button
        v-if="Info.applicationId && Info.type !== 4"
        size="medium"
        style="width: 100px"
        type="primary"
        @click="btnClick(1)"
      >
        {{$t('申请单详情')}}
      </u-button>
      <u-button
        :disabled="addLoad"
        :loading="addLoad"
        size="medium"
        style="width: 100px"
        type="primary"
        @click="btnClick(2)"
      >
        {{$t('追加拍照')}}
      </u-button>
      <u-button v-if="Info.error !== 3" size="medium" type="warning" @click="btnClick(3)">
        {{$t('备注')}}
      </u-button>
    </view>
    <u-modal
      ref="uModal"
      v-model="modal.show"
      async-close
      show-cancel-button
      :title="$t('备注')"
      @confirm="modalConfirm"
    >
      <view class="slot-content">
        <u-input
          v-model="modal.value"
          border
          :placeholder="$t('备注')"
          placeholder-style="color: red;"
          type="textarea"
        />
      </view>
    </u-modal>
    <!-- #ifndef MP-WEIXIN -->
    <qssAnimateGif ref="qssAnimateGif" style="z-index: 1000"></qssAnimateGif>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computeError() {
      return (error) => {
        if (error === -1) {
          return '/static/image/icon/yichang.png'
        } else if (error === 0) {
          return '/static/image/icon/zhengchang.png'
        } else if (error === 1) {
          return '/static/image/icon/jinggao.png'
        } else if (error === 3) {
          return '/static/image/icon/zuofei.png'
        }
      }
    }
  },
  data() {
    return {
      addLoad: false,
      imageNum: 0,
      OP: '', //带过来的值
      Info: {
        replenishUrls: ['1', '2']
      }, //获取详情
      modal: {
        num: '',
        show: false,
        value: ''
      },
      allImages: []
    }
  },
  onLoad(op) {
    uni.setNavigationBarTitle({title: this.$t('使用记录详情')})
    try {
      this.OP = JSON.parse(decodeURIComponent(op.data))
    } catch (e) {
      this.OP = JSON.parse(op.data)
    }

    //刷新
    uni.$on('bindingApplicationFormToApplicationList', () => {
      //获取详情信息
      this.searchNextAndPreInfoByKeyword()
    })
    //获取详情信息
    this.searchNextAndPreInfoByKeyword()
  },
  methods: {
    copyHash(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: this.$t('复制成功')
          })
        }
      })
    },
    async seeImage(index, type) {
      if (this.allImages[index].title === this.$t('人脸图片')) {
        uni.previewImage({
          urls: [this.allImages[index].fileUrl]
        })
      } else {
        //过滤掉人脸
        let list = this.allImages.filter((item) => item.title !== this.$t('人脸图片'))
        uni.$lizhao.seeBigImage.previewImage(list, list[index], index, type, this)
      }
    },
    btnClick(num) {
      if (num === 0) {
        uni.navigateTo({
          url:
            '../bindingApplicationForm/bindingApplicationForm?infoId=' +
            encodeURIComponent(JSON.stringify(this.Info.id)),
          success: (res) => {},
          fail: () => {},
          complete: () => {}
        })
      } else if (num === 2) {
        uni.chooseImage({
          count: 9,
          sizeType: ['original', 'compressed'],
          sourceType: ['camera', 'album'],
          success: (res) => {
            let tempFilePaths = res.tempFilePaths[0]
            //上传图片
            this.uploadFile(tempFilePaths)
          }
        })
      } else if (num === 1) {
        //申请单详情
        let data = {
          clickItem: {
            id: this.Info.applicationId
          },
          option: {
            name: '申请单详情'
          }
        }
        //console.log(data);
        uni.navigateTo({
          url:
            '/pages/application/applicationDetails/applicationDetails?data=' +
            encodeURIComponent(JSON.stringify(data)),
          success: (res) => {},
          fail: () => {},
          complete: () => {}
        })
      } else if (num === 3) {
        //备注
        this.modal.value = this.Info.remark
        this.modal.show = true
      }
    },
    //上传图片
    uploadFile(file) {
      this.addLoad = true
      this.$lizhao.upload
        .upload(file)
        .then((res) => {
          this.replenishInfo(res)
        })
        .catch((err) => {
          this.addLoad = false
        })
    },
    //追加图片信息
    replenishInfo(fileId) {
      let req = {
        fileId, //图片id
        infoId: this.Info.id //记录ID
      }
      this.$u.get(this.api.GLOBAL_sealRecordInfo_replenishInfo, req).then((res) => {
        this.addLoad = false
        if (res.code === 200) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          //获取详情信息
          this.searchNextAndPreInfoByKeyword()
        }
      })
    },
    //弹出层确定
    modalConfirm() {
      let req = {
        infoId: this.Info.id, //记录id
        remark: this.modal.value //备注
      }
      this.$u.get(this.api.GLOBAL_device_sealRecordInfo_customRemark, req).then((res) => {
        this.$refs.uModal.clearLoading()
        if (res.code === 200) {
          uni.showToast({
            title: res.msg
          })
          this.modal.show = false
          //获取详情信息
          this.searchNextAndPreInfoByKeyword()
        }
      })
    },
    //获取详情信息
    searchNextAndPreInfoByKeyword() {
      let req = {
        infoId: this.OP.id,
        deviceType: this.OP.deviceType
      }
      this.$u.get(this.api.GLOBAL_sealRecordInfo_searchNextAndPreInfoByKeyword, req).then((res) => {
        if (res.code === 200) {
          this.Info = res.data
          //处理合并不同类型图片
          this.handleImage()
        }
      })
    },
    //处理合并不同类型图片
    handleImage() {
      let arr = []
      if (this.Info.useUrl) {
        let useUrl = this.Info.useUrl.map((res) => {
          return {
            title: this.$t('盖章图片'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(useUrl)
      }
      if (this.Info.auditorUrls) {
        let auditorUrls = this.Info.auditorUrls.map((res) => {
          return {
            title: this.$t('审计图片'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(auditorUrls)
      }
      if (this.Info.warnUrls) {
        let warnUrls = this.Info.warnUrls.map((res) => {
          return {
            title: this.$t('按压超时'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(warnUrls)
      }
      if (this.Info.numUrls) {
        let numUrls = this.Info.numUrls.map((res) => {
          return {
            title: this.$t('超次图片'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(numUrls)
      }
      if (this.Info.replenishUrls) {
        let replenishUrls = this.Info.replenishUrls.map((res) => {
          return {
            title: this.$t('追加图片'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(replenishUrls)
      }
      if (this.Info.temporaryUrls) {
        let temporaryUrls = this.Info.temporaryUrls.map((res) => {
          return {
            title: this.$t('临时图片'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(temporaryUrls)
      }
      if (this.Info.passwordUrls) {
        let passwordUrls = this.Info.passwordUrls.map((res) => {
          return {
            title: this.$t('密码图片'),
            ...res,
            fileUrl: res.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          }
        })
        arr = arr.concat(passwordUrls)
      }
      if (this.Info.faceImgUrl) {
        let faceImgUrl = {
          title: this.$t('人脸图片'),
          fileUrl: this.Info.faceImgUrl + '?Authorization=' + this.userInfo.token + '&us=app'
        }
        arr = arr.concat(faceImgUrl)
      }
      this.allImages = arr
      //如果是量子图片的先给个默认水印图片
      for (let a = 0; a < arr.length; a++) {
        if (arr[a].enType === 3 || arr[a].enType === 4) {
          arr[a].QssfileUrl = arr[a].fileUrl
          arr[a].fileUrl = '../../../static/dianxin/shuiyin.png'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.useDetails {
  background-color: #fff;
  width: 100%;

  .u-cell-group {
    position: relative;
    padding-bottom: 160rpx;

    .title {
      max-width: 420rpx;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .slot-content {
    padding: 20rpx;
  }

  .image-warp {
    position: absolute;
    right: 40rpx;
    top: 10%;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    padding: 20rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
}
</style>
